/*定义滚动条高宽及背景
 高宽分别对应横竖滚动条的尺寸*/
::-webkit-scrollbar {
    width: 15px;
    height: 8px;
    background-color: rgba(0, 0, 0, .2);
}

/*定义滚动条轨道
内阴影+圆角*/
::-webkit-scrollbar-track {
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
    border-radius: 10px;
    background-color: #E4E4E4;
}

/*定义滑块
 内阴影+圆角*/
::-webkit-scrollbar-thumb {
    border-radius: 10px;
    -webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, .3);
    background-color: #b3b3b3;
}

.el-message-box__message p {
    line-height: 40px;
}

.el-button--primary {
    margin-top: 50px !important;
}

.el-icon-close {
    display: none;
}

.el-message {
    min-height: 100px;

    .el-message__content {
        font-size: 30px;
    }

    font-size: 40px;
}

.el-dialog {
    width: 45% !important;

    .el-dialog__header {
        .el-dialog__title {
            font-size: 30px;
        }
    }

    .el-dialog__body {
        font-size: 30px;
        padding: 70px;
    }

    .el-button {
        width: 120px;
        height: 60px;
        font-size: 30px;
    }
}

.el-message-box {
    width: 600px;
    height: 300px;

    .el-message-box__title {
        font-size: 30px;

        .el-message-box__status {
            font-size: 30px !important;
        }
    }

    .el-message-box__content {
        font-size: 30px;
        margin-top: 30px;
    }

    .el-button {
        width: 100px;
        height: 50px;
        margin-top: 100px;
        font-size: 30px;
    }

    .el-message-box__close {
        font-size: 50px;
    }
}

.examination {
    width: 100vw;
    height: 100vh;
    background-color: #eceaea;
    position: relative;

    .navBar {
        height: 120px;
        padding: 0 20px;
        background-color: #5C95FA;
        display: flex;
        align-items: center;
        justify-content: space-between;
        color: #fff;
        font-size: 25px;

        .btn {
            font-size: 40px;

            .el-button--medium {
                width: 120px;
                height: 50px;
                font-size: 20px;
                padding: 0;
            }
        }
    }

    .contentOfExamination {
        margin: 20px 0;
        display: flex;


        .leftCollapse {
            width: 470px;
            max-height: 555px;
            margin-right: 20px;
            overflow: auto;
            position: relative;

            .checkedContent {
                padding-bottom: 120px;
            }

            .el-collapse-item__wrap {
                // max-height: calc(100vh - 510px);
                // overflow-y: auto;
                padding-top: 10px;
            }

            .el-collapse-item__content {
                display: flex;
                flex-wrap: wrap;
                font-size: 18px;

                .contentIndex {
                    text-align: center;
                    line-height: 40px;
                    width: 40px;
                    height: 40px;
                    margin: 4px;
                    background-color: rgb(228, 228, 228);
                }

                .checkedIndex {
                    text-align: center;
                    line-height: 40px;
                    width: 40px;
                    height: 40px;
                    margin: 4px;
                    color: #ffffff;
                    background-color: rgb(19, 136, 221);
                }

                .endIndex {
                    text-align: center;
                    line-height: 40px;
                    width: 40px;
                    height: 40px;
                    margin: 4px;
                    color: #ffffff;
                    background-color: #C1DBFF;
                }

                .startindex {
                    width: 40px;
                    height: 40px;
                    margin: 4px;
                    background-image: url(../../assets/star.png);
                    background-repeat: no-repeat;
                    background-size: 100%;
                    text-align: center;
                    line-height: 40px;
                    color: #fff;
                }
            }


            .el-collapse {
                width: 450px;
            }

            .el-collapse-item__header {
                background-color: #5C95FA;
                height: 32px;
                color: #fff;
                padding-left: 10px;
            }



        }

        .rightCollapse {

            background-color: #ffffff;
            width: calc(100vw - 500px);
            height: calc(100vh - 160px);
            position: relative;

            .navContent {

                margin: 20px 0 20px 30px;

                .titleClass {
                    font-size: 40px;
                    margin-right: 10px;
                }

                .scoreBoard {
                    font-size: 20px;
                }
            }

            .testContent {
                margin: 40px 0 0 70px;
                font-size: 20px;
                letter-spacing: 1px;

                .questionTitle {
                    font-size: 22px;
                    position: relative;

                    .answer {
                        color: #5C95FA;
                    }
                }

                .questionTitle2 {
                    display: flex;
                    align-items: center;


                    .showimgView {
                        width: 150px;
                        height: 150px;
                        margin-left: 20px;
                    }
                }

                .el-checkbox-group {
                    display: flex;
                    flex-direction: column;
                    margin-top: 30px;

                    .el-checkbox {
                        margin: 20px 0;
                        display: flex;

                        .el-checkbox__inner {
                            width: 20px;
                            height: 20px;
                        }

                        .el-checkbox__inner::after {
                            border: 4px solid #fff;
                            border-left: 0;
                            border-top: 0;
                            left: 6px;
                            top: 3px;
                        }

                        .el-checkbox__input.is-checked .el-checkbox__inner::after {
                            transform: rotate(50deg) scaleY(1.3);
                        }

                        .el-checkbox__label {
                            font-size: 20px;
                            color: #000000;
                            display: flex;

                            div {
                                width: 100%;
                                white-space: normal;
                                word-break: break-all;

                            }


                        }
                    }
                }

                .el-radio-group {
                    margin-top: 10px;
                    width: 70%;


                    .el-radio {
                        display: flex;
                        margin: 20px 0;
                        align-items: center;

                        .el-radio__inner {
                            width: 20px;
                            height: 20px;
                            border: 2px solid rgb(184, 175, 175);
                        }

                        .el-radio__label {
                            font-size: 20px;
                            margin-left: 15px;
                            width: 100%;
                            display: flex;
                            color: #000;
                            line-height: 30px;
                            div {
                                display: flex;
                                width: 100%;
                                white-space: normal;
                                word-break: break-all;

                            }
                        }
                    }
                }




            }

            .operationBtn {
                border-top: 2px solid #ded7d7;
                width: calc(100vw - 500px);
                height: 150px;
                display: flex;
                align-items: center;
                justify-content: center;
                position: absolute;
                bottom: 0;

                content {
                    display: flex;
                    text-align: center;
                    width: 600px;
                    margin: 10px auto;
                    justify-content: space-between;
                    color: #858383;

                    span {
                        margin-top: 150px;
                    }

                    .leftIcon,
                    .starIcon,
                    .rightIcon {
                        width: 60px;
                        height: 60px;
                        background-repeat: no-repeat;
                        background-size: contain;
                    }

                    .leftIcon {
                        background-image: url(../../assets/leftIcon_gray.png);
                    }

                    .leftIcon:hover {
                        background-image: url(../../assets/leftIcon_blue.png);
                    }

                    .starIcon {
                        background-image: url(../../assets/star_gray.png);
                    }

                    .starIcon:hover {
                        background-image: url(../../assets/star_blue.png);
                    }

                    .rightIcon {
                        background-image: url(../../assets/rightIcon_gray.png);
                    }

                    .rightIcon:hover {
                        background-image: url(../../assets/rightIcon_blue.png);
                    }
                }



            }
        }
    }

    .bottomCollapse {
        width: 440px;
        height: 180px;
        padding: 15px;
        background-color: #fff;
        position: fixed;
        bottom: 0;
        left: 0;

        .bottomIcon {
            position: fixed;
            bottom: 200px;
            left: 0;
            z-index: 1;
            display: flex;
            align-items: center;
            justify-content: space-around;
            border-bottom: 1px solid #999999;
            border-top: 1px solid #999999;
            font-size: 18px;
            background-color: #fff;
            height: 80px;
            width: 470px;

            &>div {
                display: flex;
                align-items: center;
            }

            &>div>img {
                width: 40px;
                height: 40px;
            }

            .gray,
            .wathet,
            .blue {
                width: 40px;
                height: 40px;
            }

            .gray {
                background-color: #CCCCCC;
            }

            .wathet {
                background-color: #C1DBFF;
            }

            .blue {
                background-color: #5896F8;
            }
        }

        .header {
            color: #006aff;
            font-size: 18px;
            font-weight: bold;
            margin-bottom: 10px;
        }

        .titleContent {
            display: flex;
            align-items: center;

            .userImg {
                width: 100px;
                height: 150px;
            }

            .userInfo {
                margin-left: 15px;

                &>div {
                    font-size: 18px;
                    margin: 10px 0;
                    display: flex;
                    align-items: center;

                    span {
                        font-weight: bold;
                    }

                    .ID {
                        font-size: 18px;
                        width: 100%;
                        word-wrap: break-word;
                        word-break: break-all;
                        overflow: hidden;
                    }
                }

                .userTitle {
                    color: gray;
                    margin-right: 10px;
                }
            }
        }
    }
}